<template>
  <div class="app-prjteammgr-info">
    <div
      v-for="item in taskTeamMemberMetaShow"
      :key="item.value"
      v-show="iseditteam == 0"
    >
      <div class="member">
        <el-tooltip
              class="item"
              effect="dark"
              :content="item.label ? item.label : item.value"
              placement="top-start"
            >
            <div class="member-link">
              <v-avatar
                size="45"
                class="float-left"
                :color="$util.getColorByPersonName(item.label ? item.label : item.value)"
              >
                <span class="white--text" style="font-size:24px">{{
                  item.label
                    ? item.label.substr(item.label.length - 1)
                    : item.value.substr(item.value.length - 1)
                }}</span>
              </v-avatar>
              <span class="name">{{
                item.label ? item.label : item.value
              }}</span>
              <span class="role">成员</span>
            </div>
        </el-tooltip>
      </div>
    </div>

    <!--编辑模式-->
    <div class="select-member" v-show="iseditteam == 1">
      <h4>选择项目成员</h4>
      <p class="desc">
        管理员可以邀请和移除项目成员，只有被邀请的团队成员才能访问该项目的信息
      </p>
      <div class="mb-4">
        <el-select
          :value="memberVal"
          placeholder="点击添加成员"
          filterable
          size="small"
          @change="
            (val) => {
              changeMember(val);
            }
          "
        >
          <el-option
            v-for="item in userslist"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          >
            <v-avatar size="20" color="#29B6F6" style="margin-left:15px">
              <span style="font-size:12px;color:white">{{
                item.label
                  ? item.label.substr(item.label.length - 1)
                  : item.value.substr(item.value.length - 1)
              }}</span>
            </v-avatar>
            <span>{{ item.label ? item.label : item.value }}</span>
            <v-divider></v-divider>
          </el-option>
        </el-select>
      </div>
      <div v-for="item in userslist" :key="item.value">
        <div class="smember">
          
          <div class="member-link">
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.label ? item.label : item.value"
              placement="top-start"
            >
            <v-checkbox
              v-model="selected"
              :value="item.value"
              color="blue"
              class="mx-2"
              dense
              :label="item.label ? item.label : item.value"
            ></v-checkbox>
            </el-tooltip>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Model,
  Emit,
  Watch,
  Provide,
} from "vue-property-decorator";

import "./app-prjteammgr-info.less";
import ProjectService from "@/service/project/project-service";
import UsersService from "@/service/user/user-service";
import CodeListService from "@/codelist/codelist-service";
import ProjectTeamServiceBase from "@service/project-team/project-team-service-base";
import { Subject, Subscription } from "rxjs";

@Component({})
export default class AppPrjteamMgrInfo extends Vue {
  /**
   * 用户列表数据集
   *
   * * @type {any}
   * @memberof AppPrjteamMgrInfo
   */
  public userslist: any;

  /**
   * 代码表服务对象
   *
   * @type {CodeListService}
   * @memberof AppPrjteamMgrInfo
   */
  public codeListService: CodeListService = new CodeListService({
    $store: this.$store,
  });

  /**
   * 项目团队对象
   *
   * @type {ProjectTeamServiceBase}
   * @memberof AppPrjteamMgrInfo
   */
  public projectTeamServiceBase: ProjectTeamServiceBase = new ProjectTeamServiceBase();

  /**
   * 应用上下文
   *
   * @type {any}
   * @memberof AppPrjteamMgrInfo
   */
  @Prop() public context: any;

  /**
   * 显示模式
   *
   * @type {any}
   * @memberof AppPrjteamMgrInfo
   */
  @Prop() public iseditteam: any;

  /**
   * 视图参数
   *
   * @type {any}
   * @memberof AppPrjteamMgrInfo
   */
  @Prop() public viewparams: any;

  /**
   * 表单状态
   *
   * @type {Subject<any>}
   * @memberof AppEmbedPicker
   */
  @Prop() public formState!: Subject<any>;

  /**
   * 视图状态事件
   *
   * @protected
   * @type {(Subscription | undefined)}
   * @memberof SelectType
   */
  protected formStateEvent: Subscription | undefined;

  /**
   * 选择成员数组
   * @type {any}
   * @memberof AppPrjteamMgrInfo
   */
  public selected: any = [];

  public memberVal: any = "";
  /**
   * 项目成员清单
   *
   * @type {any}
   * @memberof AppPrjteamMgrInfo
   */
  public taskTeamMemberMetaShow: any = [];

  /**
   * 颜色
   *
   * @type {Array}
   * @memberof AppPrjteamMgrInfo
   */
  public colors: Array<string> = ["#29B6F6", "#FFA726", "#43A047", "#AB47BC"];

  /**
   *分页对象
   *
   *@memberof AppPrjteamMgrInfo
   */
  private page: any = {
    size: 1000,
    page: 0,
  };

  /**
   * Vue声明周期，组件创建完毕
   *
   * @memberof AppPrjteamMgrInfo
   */
  public created() {
    this.getCodeList();
  }

  /**
   * Vue声明周期，组件加载完毕
   *
   * @memberof AppPrjteamMgrInfo
   */
  public mounted() {
    this.getDisMode();
  }

  /**
   * 下拉框选择成员
   *
   * @param {any} val
   * @memberof AppPrjteamMgrInfo
   */
  public changeMember(val: any) {
    if (this.selected.indexOf(val) == -1) {
      this.selected.push(val);
    }
  }

  public getDisMode() {
    if (this.formState) {
      this.formStateEvent = this.formState.subscribe(({ type, data }) => {
        if (Object.is(type, "load")) {
          if (Object.is(this.viewparams.iseditteam, "1")) {
            this.$emit("onformitemvaluechange", {
              name: "iseditteam",
              value: 1,
            });
          }
        }
      });
    }
  }

  /**
   * 获取动态代码表UserRealName
   *
   * @memberof AppPrjteamMgrInfo
   */
  public async getCodeList() {
    this.userslist = [];
    let codeList: any = this.codeListService.getItems(
      "UserRealName",
      {},
      [],
      true
    );
    await codeList
      .then((items: any) => {
        if (items && items.length > 0) {
          //this.userslist.push(...items);
          this.userslist = items;
        }
      })
      .catch((error: any) => {
        console.log(error);
      });
    await this.getTaskTeam();
  }

  /**
   * 获取项目团队成员清单
   *
   * @memberof AppPrjteamMgrInfo
   */
  public async getTaskTeam() {
    let context: any = {};
    let params: any = {
      srfparentdename: "Project",
      srfparentkey: this.context.project,
      project: this.context.project,
      multiple: 0,
      n_root_eq: this.context.project,
    };

    Object.assign(params, this.page);
    await this.projectTeamServiceBase
      .FetchDefault(context, params, true)
      .then((response: any) => {
        if (response && response.status === 200) {
          if (response.data) {
            this.taskTeamMemberMetaShow = [];
            for (let i = 0; i < response.data.length; i++) {
              let account = response.data[i].account;
              let realname = response.data[i].account;
              let commiter = response.data[i].commiter;
              this.userslist.forEach((useritme: any) => {
                if (Object.is(useritme.value, account)) {
                  realname = useritme.label;
                }
              });
              if (this.selected.indexOf(response.data[i].account) == -1) {
                this.selected.push(response.data[i].account);
              }
              let member: any = {
                value: account,
                label: realname,
                commiter: commiter,
              };

              this.taskTeamMemberMetaShow.push(member);
            }
          }
        }
      })
      .catch((e: any) => {
        if (e && e.status === 500) {
          const url: any = "/500";
          this.$router.push({ path: url });
        } else {
          this.$Notice.error({
            title: "错误",
            desc: e.data.message,
          });
        }
      });
  }
}
</script>
